<template>
    <div class="banner">
        <swiper ref="swiper" class="swiper" :options="swiperOption">
            <swiper-slide v-for="(item, index) in banner" :key='index'>
                <img class="swiper-banner" :src="item.bannerUrl + '?x-oss-process=image/resize,m_fixed,h_230,w_335'" :data-videoId="item.videoId"  :data-url="item.h5Url" :data-mainId="item.mainId"/>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
const vm = this
export default {
    props: ['bannerList'],
    data() {
        const _self = this;
        return {
            banner: [
                // {
                //     'bannerUrl': 'https://img0.baidu.com/it/u=3593454291,2854711423&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
                // },
                // {
                //     'bannerUrl': 'https://pic.lvmama.com/uploads/pc/place2/2017-11-24/19e96e3c-ba34-4dc4-8b17-62b3aa595cf9.jpg',
                // },
                // {
                //     'bannerUrl': 'https://pic.lvmama.com/uploads/pc/place2/2017-11-24/19e96e3c-ba34-4dc4-8b17-62b3aa595cf9.jpg',
                // },
                // {
                //     'bannerUrl': 'https://pic.lvmama.com/uploads/pc/place2/2017-11-24/19e96e3c-ba34-4dc4-8b17-62b3aa595cf9.jpg',
                // },
                // {
                //     'bannerUrl': 'https://pic.lvmama.com/uploads/pc/place2/2017-11-24/19e96e3c-ba34-4dc4-8b17-62b3aa595cf9.jpg',
                // }
            ],
            swiperOption: {
                centeredSlides: true,
                slidesPerView: 'auto',
                speed: 500,
                spaceBetween: 40, // 在slide之间设置距离（单位px）。
                loop: true,
                cubeEffect: {
                    slideShadows: true,
                    shadow: true,
                    shadowOffset: 10,
                    shadowScale: 0.6
                },
                autoplay: {
                    delay: 5000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
                autoplay: _self.banner > 1,
                coverflowEffect: {
                    rotate: 0,
                    stretch: 0,
                    depth: 100,
                    // modifier: 1,
                    slideShadows: true
                },
                pagination: {
                    el: '.swiper-pagination'
                },
                on: {
                    click: function (e) {
                        let url = e.target.getAttribute('data-url')
                        let mainId = e.target.getAttribute('data-mainId')
                        let videoId = e.target.getAttribute('data-videoId')
                        let isZxjtUrl = _self.isZxjtUrl(url)
						//轮播图打点
                        $sensorsTrack('financing_videoZoneHomePageOpClick', {
                            click_position: '轮播banner图',
                            main_id: mainId,
                            jump_url: url
                        });
                        if (isZxjtUrl) {
                            let params = {
                                path: `/${_self.$channel}/liveBack/${videoId}`,
                                query: {
                                    dzhPage: 'true'
                                }
                            }
                            _self.$router.push(params)
                        } else {
                            const params = {
                                'linkType': 1,
                                'link': url
                            }
                            fun.linkUrlFloatVideo(params)
                        }
                    }
                }
            }
        }
    },
    methods: {
        //banner位曝光度埋点
        exposureDot(url, mainId) {
            $sensorsTrack('financing_videoZoneHomePageOpExposure', {
                exposure_position: '轮播banner图',
                main_id: mainId,
                jump_url: url
            });
        },
        //曝光率方法
        obServerDom(selectDom) {
            //异步 this.$nextTick()
            const ob = new IntersectionObserver((entries) => {
                entries.forEach((i) => {
                    if (i.isIntersecting) {//进入视口
                        let url = i.target.getAttribute('data-url')
                        let mainId = i.target.getAttribute('data-mainId')
                        this.exposureDot(url, mainId)//轮播图曝光度打点
                    }
                    //ob.unobserve(target)//取消观察
                });
            }, {
                //配置项
                root: null,
                threshold: 1.0,
                rootMargin: '0px',
            })
            const queryDom = document.querySelectorAll(selectDom);
            console.log(queryDom);
            queryDom.length && queryDom.forEach((item) => {
                ob.observe(item)
            })
        },
        //判断url跳转方式
        isZxjtUrl(url) {
            let arrUrl = ['https://testlive.csc108.com', 'https://live.csc108.com/', 'https://sit.dzhlive.com']
            let flag = arrUrl.some(item => {
                return url.includes(item)
            })
            return flag
        },
    },
    watch: {
        bannerList(newValue) {
            this.banner = newValue
            this.$nextTick(() => {
                this.obServerDom('.swiper-banner')
            })
        }
    },
}
</script>

<style scoped lang="less">
.banner {
    margin-top: 18px;
    width: 100%;
    height: 230px;
    overflow: hidden;
}

img {
    width: 100%;
    height: 230px;
    border-radius: 20px;
}
</style>